<template>

    <h1>2. 标签的使用</h1>

    <div>
        <!-- 注意下面的tag与index的顺序 -->
        <template v-for="(tag, index) in tags" :key="tag">

            <el-tag :closable="closeList[index]" @close="closeTag(index)" @click="clickTag(tag, index)">
                {{ tag }}
            </el-tag>

            <span style="padding:10px"></span>
        </template>

        <el-input style="width: 90px" v-if="show" v-model="inputValue" @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm" size="small">
        </el-input>

        <el-button size="small" v-else @click="showInput">新建标签 +</el-button>
    </div>
    <div>
        <el-check-tag :checked="true">足球</el-check-tag>
        <el-check-tag :checked="false">篮球</el-check-tag>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tags: ["男装", "女装", "帽子", "鞋子"],
            closeList: [true, false, true, false],
            show: false,
            inputValue: "",
            closable: true,
        }
    },
    methods: {
        closeTag(index) {
            // 从index位置删除一个标签
            this.tags.splice(index, 1);
        },

        clickTag(tag, index) {
            // 这里可以换成更好看的，带标题的对话框吗？
            alert(tag + index);
        },

        showInput() {
            this.show = true
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.tags.push(inputValue);
            }
            this.show = false;
            this.inputValue = '';
        }
    }
}
</script>